<div style="padding-bottom:20px;">

<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('jquery.dataTables'); ?>
<?php echo $this->Html->script('jquery.dataTables.min');  ?> 


<script type="text/javascript">
    $(document).ready(function() {
        oTable = $('#clientsTable').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "aoColumns": [
								{ "sTitle": "Id" },
								{ "sTitle": "Nombre" },
								{ "sTitle": "Direccion" },
								],
            "sAjaxSource": "<?php echo $this->Html->Url(array('controller' => 'GridClient', 'action' => 'ajaxData')); ?>"
        });
    });

</script>
 

 
<table id="clientsTable" class = "table table-striped">
    <thead>
        <tr>
            <th>id</th>
            <th>nombre</th>
            <th>direccion</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="4" class="dataTables_empty">Loading data from server...</td>
        </tr>
    </tbody>
</table>

</div>